<template>
  <div class="index_layout">
    <Navigation class="index_navi"></Navigation>
    <ImageList v-if="this.loaded" class="image_list" v-bind:images=this.images>
    </ImageList>
  </div>
</template>

<script>
import Navigation from "@/components/navigation/Navigation";
import axios from "axios";
import ImageList from "@/components/index/ImageList";

export default {
  name: "Index",
  data() {
    return {
      get_images_resp: null,
      images: [],
      loaded: false,
    }
  },
  mounted() {
    if (!this.loaded) {
      this.getImages()
    }
  },
  components: {ImageList, Navigation},
  methods: {
    getImages() {
      axios.get("http://localhost:1110/images?limit=40&offset=0")
          .then(
              response => {
                this.get_images_resp = response.data
              })
          .then(
              () => {
                this.images = this.get_images_resp.images;
                this.loaded = true
              }
          )
    }
  }

}
</script>

<style scoped>

.index_layout {
  display: flex;
  flex-direction: column;
  align-items: center; /* 元素居中对齐 */
}

.index_navi {
}

.image_list {
  margin-top: 1rem;
}
</style>